<script setup lang="ts">
import type {INavBars} from "~/types/home";

export interface IPops {
  navbars: INavBars[]
}

const props = withDefaults(defineProps<IPops>(), {
  navbars: () => []
})

// 记录当前点击的索引
let currentIndex = ref<number>(0)

// 点击navBar的逻辑
function handleNavBarClick(index: number) {
  currentIndex.value = index
  // console.log(currentIndex.value)
}

// 动态匹配路由,注意使用computed
const getPagePath = computed(() => {
  return (item: INavBars) => {
    let path = '/'
    if (item.type !== 'oppo') {
      path += item.type
    }
    return path
  }
})
</script>

<template>
  <div class="navbar">
    <div class="wrapper content">
      <NuxtLink class="content-left" href="/">
        <img class="logo" src="@/assets/images/logo.png" alt="">
        <h1 class="title">手机商城 phone-store</h1>
      </NuxtLink>
      <ul class="content-center">
        <li v-for="(item,index) in navbars" :key="index">
          <NuxtLink :to="getPagePath(item)" @click="handleNavBarClick(index)" class="link">{{ item.title }}</NuxtLink>
        </li>
      </ul>
      <search class="content-right"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  // 多行的间距(从单行上下同时撑开->居中) / 行盒的高度
  line-height: 90px;
}

.content {
  display: flex;
  align-items: center;

  .content-left {
    display: flex;
    align-items: center;

    .logo {
      height: 60px;
      width: 290px;
    }
  }

  .content-center {
    display: flex;
    align-items: center;

    .link {
      color: $textSubColor;
      padding: 20px 30px;
      opacity: 0.8;
      cursor: pointer;
    }

    .link:hover {
      color: $textTitleColor;
      opacity: 1;
      background: #e7eeee;
    }
  }

  .content-right {
    margin-left: 272px;
  }
}

.title {
  //设置区块元素中文本行前面空格（缩进）的长度
  text-indent: -1000px;
  height: 0;
  margin: 0;
}
</style>
